<template>
  <div>
    <div class="register-wrapper">
      <div id="register">
        <p class="title">注册</p>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="0"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="ruleForm.username"
              auto-complete="off"
              placeholder="请输入输入账号"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              auto-complete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              type="password"
              v-model="ruleForm.confirmPassword"
              auto-complete="off"
              placeholder="请确认密码"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="width: 100%"
              >注册</el-button
            >
            <p class="login" @click="gotoLogin">已有账号立即登录</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from '../../src/api/user'
import getColor from '../utils/txorbg'

export default {
  data () {
    const confirmPassword = (rule, value, callback) => {
      if (this.ruleForm.password !== value.toString()) {
        callback(new Error('确认密码和新密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        username: '',
        password: '',
        confirmPassword: ''
      },

      rules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: ['blur']
          },
          {
            pattern: /^[0-9a-zA-Z_]{1,}$/,
            message: '用户名格式不正确，必须是字母数字或下划线',
            trigger: ['blur']
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: ['blur']
          }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空！', trigger: 'blur' },
          { required: true, validator: confirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 已存在登录，跳转登录
    gotoLogin () {
      this.$router.push('/login')
    },

    // 注册
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const newuser = this.ruleForm
          newuser.txcolor = 'white'
          newuser.bgcolor = getColor()

          register(newuser)
            .then((res) => {
              console.log(res)
              if (res.data.code === 200) {
                this.$message.success('注册成功')
                setTimeout(() => {
                  this.$router.push('/login')
                }, 1000)

                // this.$router.push('/')
                console.log('注册成功！')
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          console.log('error submit !!')
          return false
        }
      })
    }

    // submitForm (formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       setTimeout(() => {
    //         alert('注册成功！')
    //       }, 400)
    //     } else {
    //       console.log('erro submin!!')
    //       return false
    //     }
    //   })
    // }
  }
}
</script>

<style>
.loading-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #aedff8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.register-wrapper img {
  position: absolute;
  z-index: 1;
}
.register-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#register {
  max-width: 340px;
  margin: 60px auto;
  background: #fff;
  padding: 60px 40px;
  border-radius: 10px;
  position: relative;
  z-index: 9;
}
.title {
  font-size: 26px;
  line-height: 50px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}
.el-form-item {
  text-align: center;
}
.login {
  margin-top: 5px;
  font-size: 14px;
  line-height: 22px;
  color: #1ab2ff;
  cursor: pointer;
  text-align: left;
  text-indent: 8px;
  width: 150px;
}
.login:hover {
  color: #2c2fd6;
}

.el-button--primary:focus {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>
